Auth0のNewユニバーサルログインページのテンプレートがGAされました

#ソリューション

森亮介

2020.09.09

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

以前ベータ版が提供されたときも記事にしましたが、ついにGAされました。

できることはベータの時と変わらず、

グラデーションや背景画像で背景をカスタマイズする
ページレイアウトを変更する
ヘッダーまたはフッターを追加する
アプリケーションまたはユニバーサルログインページに応じて異なるコンテンツを提供する

です。

ページテンプレートのベータ版を使用していた場合は、

にclass="_widget-auto-layout"を追加するか、好きな場所に配置したコンテナの中に<auth0:widget>を含めるようにテンプレートを調整する必要があります。

例

<!DOCTYPE html>
<html>
  <head>
    {%- auth0:head -%}
  </head>
  <body class="_widget-auto-layout">
    {%- auth0:widget -%}
  </body>  
</html>

_widget-auto-layoutはウィジェットをページ中央に配置します。

せっかくですので、色々とユニバーサルログインのページを弄ってみようと思います。

ウィジェットを左に寄せ、右側に独自のコンテンツを表示し、フッターを配置してみる

HTMLとCSSは適当にこさえました。

<!DOCTYPE html>
<html>
  <head>
    {%- auth0:head -%}
    <style>
    .wrapper{
    	display:flex;
        margin: auto;
		width: 100%;
        height: 100%;
        padding: 80px;
    }
    .widget {
    	width: 30%;
    	background-color: rgb(60,60,60);
    }
    .my-contents-1{
    	width: 40%;
    }
    .my-contents-2{
    	width: 30%;
    }
    .my-contents-1 .ads {
    	width: 360px;
    	margin: auto;
    }
    .my-contents-1 .ads  img {
    	display: block;
    	width: 100%;
    	height: auto;
    }
    .footer {
        background-color: rgb(120, 120, 120);
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 16px 0; 
        width: 100%;
        color: white;
        /* Use a high z-index for future-proofing */
        z-index: 10;
      }
      .footer ul {
        text-align: center;
      }
      .footer ul li {
        display: inline-block;
        margin: 0 4px;
      }
      .footer ul li:not(:first-of-type) {
        margin-left: 0;
      }
      .footer ul li:not(:first-of-type)::before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 4px;
        height: 4px;
        margin-right: 4px;
        background-color: white;
        border-radius: 50%;
      }
      .footer a {
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
    	<div class="widget">
    	{%- auth0:widget -%}
    	</div>
    　<div class="my-contents-1">
      　	<ul class="ads">
        　		<li><a href="https://info.classmethod.jp/devio-careers_v2" title="クラスメソッドでは採用絶賛募集中です" target="_blank"><img src="https://cdn-ssl-devio-img.classmethod.jp/wp-content/uploads/2020/04/4c731818ae63aea4b0ba53558a66a6b0.png" alt="採用募集中" title="クラスメソッドでは採用絶賛募集中です"></a>
      　	</li>
    　		</ul>
        </div>
        <div class="my-contents-2">
      　	<ul class="ads">
            	<li><img src="https://hogehoge-mori.tk/tt0r3igkyaglbswoqpph.gif" width="30%"></li>
    　		</ul>
        </div>
    </div>
    <footer class="footer">
      <ul>
        <li><a href="https://company.com/privacy">Privacy Policy</a></li>
        <li><a href="https://company.com/terms">Terms of Service</a></li>
      </ul>
    </footer>
  </body>  
</html>

このHTMLをManagement APIを使って反映させます。

例

curl --request PUT   --url 'https://<YOUR DOMAIN>/api/v2/branding/templates/universal-login'   --header "authorization: Bearer $MGMT_API_ACCESS_TOKEN"   --header 'content-type: text/html'   --data "$CUSTOM_HTML"

APIアクセスが成功した後、ログインページにアクセスすると以下のようにカスタマイズされたページが表示されます。

注意点

ページテンプレートの最大サイズは100KBなので、CSSが膨らんでしまった場合は外部に移動して回避します。
CSSのカスタマイズには、CSSのカスタマイズはサポートされていません。生成されたHTMLを見ると、次のようなコードが表示されます。
```
.c10d15918.c7b3b8672 {
  background: #D00E17;
}
  
```
と書かれているのですが、このようなランダムクラス名がついたコードは表示されていませんでした。。。？

CSSを使用してユニバーサルログインウィジェットの内部構造をターゲットにしていた場合、それらのカスタマイズは適用されなくなります

ともドキュメントには書かれていますが、適用できてしまいました。

例: ログインボタンの色を変更
```
  .ulp-button-default {
    background-color: #CCCCCC;
  }
  
```
やり方が悪いのかドキュメントの更新が古いのかわからなかったので、Auth0にフィードバックを投げておきました。